<template>
  <div v-show="visible" class="ajl-dialog">
    <div class="message-dialog">
      <header>{{title}}</header>
      <div class="msg">{{message}}</div>
      <footer>
        <button @click="callback(1)" id="cencer">取消</button>
        <button @click="callback(0)" id="ok">确定</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      visible: false,
      message: "a",
      callback: () => {}
    };
  }
};
</script>

<style lang="less" scoped>
.ajl-dialog {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background: rgba(74, 74, 74, 0.94);

  .message-dialog {
    width: 310px;
    background: #149cda;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 4px 5px 11px 2px rgba(29, 74, 95, 0.34);
  }

  .message-dialog header {
    background: #2690bf;
    color: #ffffff;
    text-align: center;
    padding: 6px;
    font-weight: 800;
  }

  .message-dialog footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 10px;
  }

  .message-dialog .msg {
    padding: 10px;
    color: #ffffff;
    font-size: 14px;
    min-height: 42px;
    font-weight: 800;
  }

  .message-dialog button {
    border: none;
    background: #10719cc4;
    color: #ffffff;
    padding: 5px 27px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    margin-left: 10px;
  }
}
</style>>
